<template>
  <div id="box" autocomplete="off">
    <div class="register-container">
    <h1>欢迎来到注册界面</h1>
    <div class="input-name"><label>用户名：</label><el-input class="input-class" v-model="username" placeholder="请输入用户名" @keyup.enter="register" clearable></el-input></div>
    <div class="input-name"><label>密码：</label><el-input class="input-class" v-model="password" type="password" placeholder="请输入密码" show-password @keyup.enter="register" autocomplete="off" clearable></el-input></div>
    <div class="input-name"><label>真实名字：</label><el-input class="input-class" v-model="name" placeholder="请输入真实名字" @keyup.enter="register" autocomplete="off" clearable></el-input></div>
    <el-button class="button-class" type="primary" plain @click="register()">注   册</el-button>
  </div>
  </div>
  
</template>

<script>
import axios from "axios";
// import {  Plus } from '@element-plus/icons-vue';
export default {
  name: "RegisterPage",
  data() {
    return {
      username: "",
      name:"",
      password: "",
    }
  },
  components:{
  },
  methods: {
    register() {
      const params = {
        username: this.username,
        name:this.name,
        password: this.password,
      }
      axios.post("/staff/register", params)
          .then(res => {
            console.log("then:" + JSON.stringify(res));

            //检查返回的对象中注册是否成功
            //如果成功，跳转到登录页面
            if (res.data.code === 200) {
              this.$message.success("注册成功");
              this.$router.push("/stafflogin")
              return;
            }

            //如果失败，提示错误信息
            this.$message.error(res.data.msg||"注册失败")

          }).catch(err => {
            console.log(JSON.stringify(err))
          })
    },
  }
}
</script>

<style scoped>
#box{
  background: url("../img/loginBackground.png");
  position:fixed;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  min-width: 1000px;
  /* z-index:-10; */
  /* zoom: 1; */
  background-color: #3c2222;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;

}
.input-name {
    display: flex;
    margin-left: 10px;
}
.input-name label {
   display: inline-block;
   padding-top: 25px;
   font-size: 15px;
   width: 75px;
   text-align: right;
}
.register-container {
  width: 450px;
  height: 350px;
  background-color: #5b6061;
  padding: 40px;
  border-radius: 30px;
  padding: 20px 30px;
  background: rgba(255, 255, 255, 0.9);
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

.input-class {
    width: 300px;
  margin-top: 20px;
}

.button-class {
  width: 200px;
  height: 40px;
  border-radius: 20px;
  margin-top: 40px;
  font-size: 16px;
}
</style>